<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>NewBee商城-注册</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/mall/css/common.css}">
    <link rel="stylesheet" th:href="@{/mall/styles/login.css}">
    <script th:src="@{/mall/jquery/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/mall/js/login.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body>
<div class="main-container">
    <div class="form-box">
        <h2>会员注册</h2>
        <form id="registerForm" class="layui-form" th:action="@{/shopping/member/register}" method="post">
            <div class="layui-form-item">
                <input type="text" name="phone" required lay-verify="required"
                       placeholder="请输入你的手机号" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
            </div>

            <div class="layui-form-item">
                <input type="password" name="password" required lay-verify="required"
                       placeholder="请输入你的密码" class="layui-input">
            </div>

            <!-- 验证码输入与显示 -->
            <div class="layui-form-item" style="display: flex; align-items: center;">
                <input type="text" name="captcha" required lay-verify="required"
                       placeholder="请输入验证码" class="layui-input" style="flex:1; margin-right:8px;">
                <img id="captchaImg" th:src="@{/shopping/captcha.jpg}" alt="验证码" style="height: 40px; cursor: pointer; border: 1px solid #ddd;">
            </div>

            <div class="layui-form-item">
                <button type="submit" class="layui-btn layui-btn-fluid">立即注册</button>
            </div>
        </form>
        <div class="register-link">
            已有账号？<a th:href="@{/shopping/member/login}">请登录</a>
        </div>
    </div>
</div>

<script th:inline="javascript">
    layui.use(['form', 'layer'], function () {
        const form = layui.form;
        const layer = layui.layer;

        $('#registerForm').on('submit', function (e) {
            e.preventDefault();

            const formData = $(this).serialize(); // 获取表单数据

            $.post(/*[[@{/shopping/member/register}]]*/, formData, function (res) {
                if (res.success) {
                    layer.msg('注册成功！正在跳转登录页...', {icon: 1, time: 2000}, function () {
                        window.location.href = /*[[@{/shopping/member/login}]]*/'';
                    });
                } else {
                    layer.msg(res.error || '注册失败', {icon: 2});
                }
            }).fail(function () {
                layer.msg("服务器错误，请稍后再试", {icon: 5});
            });
        });

        // 点击验证码图片自动刷新
        $('#captchaImg').on('click', function () {
            this.src = '/shopping/captcha.jpg?t=' + new Date().getTime(); // 防缓存
        });
    });
</script>
</body>
</html>
